import { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { Button } from 'antd'
import './style.less'
import { reqGlobalDefinition } from '@/api/dataMarket' // 接口
import { useImmer } from 'use-immer'
import { EMPTYTEXT } from '@hs-admin/utils'
import { HsAdminSpin } from '@hs-admin/base-components'
import { reqDataDomainList } from '@/api/assetMaintain/industry/domain'
import { reqMapList } from '@/api/assetMaintain/industry/atlas'

const MarketIndustryData: React.FC = () => {
  const navigate: any = useNavigate()
  const [basicDataDes, setBasicDataDes] = useState('')
  const [topicList, setTopicList] = useImmer<any[]>([])
  const [loading, setloading] = useState(true)

  // 跳转-详情页
  const handleItemDetail = (item: any) => {
    navigate(`/marketIndustryData/themeDetail?id=${item.id}`)
  }
  // 获取数据-首页简介
  const getIndexIntro = async () => {
    const res = await reqGlobalDefinition()
    if (res.code === 200) {
      setBasicDataDes(res.data.intro)
    }
  }
  // 获取数据-列表
  const getDomainList = async () => {
    setloading(true)
    const res = await reqDataDomainList({ status: 'published', page: 1, page_size: 99 })
    res.items.forEach((item: { total_cnt: string; id: any }) => {
      item.total_cnt = EMPTYTEXT
    })
    setTopicList(res.items)
    res.items.forEach(async (item: { total_cnt: string; id: any }) => {
      setloading(true)
      const paramsMap = {
        page: 1,
        page_size: 1,
        domain_id: item.id,
        status: 'published'
      }
      const res2: any = await reqMapList(paramsMap)
      item.total_cnt = res2.total
      setTopicList([...res.items])
    })
    setloading(false)
  }

  useEffect(() => {
    getIndexIntro()
    getDomainList()
  }, [])

  return (
    <div className="basicData">
      {loading && <HsAdminSpin />}
      <div className="top">
        <div className="top_text">
          <div>产业数仓</div>
          <div className="top_text_tip">{basicDataDes}</div>
        </div>
        <div className="top_img"></div>
      </div>

      <div className="content">
        <div className="title">数仓领域</div>

        <div
          style={{
            maxHeight: 'calc(100vh - 358px)'
          }}>
          <div className="content_list">
            {topicList.map((item, index) => (
              <div className="content_list_item" key={index}>
                <div className="content_list_item_top">
                  <div className="topTitle">
                    <div className="topTitleName">{item.name}</div>
                    <div className="topTitleTwo">
                      图谱数量：
                      <a>{item.total_cnt >= 10000 ? (item.total_cnt / 10000).toFixed(2) + '万个' : item.total_cnt + '个'}</a>
                    </div>
                  </div>
                </div>

                <div className="content_list_item_mid" title={item.description}>
                  {item.description}
                </div>

                <div className="content_list_item_bottom">
                  <Button type="primary" onClick={() => handleItemDetail(item)}>
                    详情
                  </Button>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}

export default MarketIndustryData
